<template>
  <div class="table-bar">
    <div class="tb-left">
      <span>已选{{ selected.length }}项</span>
      <span class="p-color" @click="cancel">取消选择</span>
    </div>
    <el-button
      type="text"
      class="tb-right d-color"
      @click="del"
      :disabled="selected.length === 0"
      >批量删除</el-button
    >
  </div>
</template>
<script>
export default {
  name: "TableBar",
  props: {
    selected: {
      type: Array,
      default: () => [],
    },
  },

  components: {},
  data() {
    return {
      num: 0,
    };
  },
  created() {},
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    del() {
      this.$emit("del");
    },
  },
};
</script>
<style lang="scss" scoped>
.table-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background: #f8f8f8;
  padding: 20px;

  .tb-left {
    display: flex;
    span {
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .tb-right {
    // cursor: pointer;
    padding: 0;
  }
  ::v-deep .el-button--text {
    color: #f5222d;
  }
}
</style>
